<template>
    <div>
        <div>
            <h2>state</h2>
            <p>{{ a }}</p>
            <p>{{ b }}</p>
        </div>
        <div>
            <h2>getters</h2>
            <p>{{ doubleA }}</p>
            <p>{{ doubleB }}</p>
            <p>{{ doubleBoth }}</p>
        </div>
        <div>
            <h2>actions-同步</h2>
            <p><button @click="addA">a++</button><button @click="a++">a++</button></p>
            <p><button @click="addAN(10)">a+10</button></p>
        </div>
        <div>
            <h2>actions-异步</h2>
            <p><button @click="addA_Async">a++</button></p>
            <p><button @click="addB_Async()">b++</button></p>
            <p><button @click="addBoth_Async()">b++</button></p>
        </div>
    </div>
</template>



<script>
    // 选项式
    // 使用store  

    // 引入store模块
    import {useDemoStore} from "@/stores/demo.js";

    // 引入辅助函数
    import  { mapWritableState,mapActions } from 'pinia';


    // let demoStore = useDemoStore()
    
  


    export default {
        data(){
            return {
               
            }
        },
        computed:{
            // mapState() 辅助函数映射为计算属性是,只有取值没有赋值 (let a = store.a  => 只能取值不能赋值)
            // ...mapState(useDemoStore,["a","b"]),
            // ...mapState(useDemoStore,["doubleA","doubleB","doubleBoth"]),

            // pinia() 中直接修改数据也会同步到store中, mapWritableState保持数据响应性

            ...mapWritableState(useDemoStore,["a","b"]),
            ...mapWritableState(useDemoStore,["doubleA","doubleB","doubleBoth"]),



        },
        methods:{
            ...mapActions(useDemoStore,["addA","addB","addAN","addA_Async","addB_Async","addBoth_Async"])
        },
        mounted(){
            console.log("demo",this.demo);
        }

    }
</script>

<script setup>
    /* import {useDemoStore} from "@/stores/demo.js";

    let demo = useDemoStore();  // 获取store实例 */
    

</script>

<style lang="scss" scoped>

</style>